import { initQiniu, uploadFile } from '../../../../api/qiniu/upload.js';
import { getUserProfileInfo, modifyUserInfo } from '../../../../api/user.js';
import { getStorageItem, setStorageItem } from '../../../../utils/storage.js';
import { updateCardInfo } from '../../../../api/card.js';
import { reqSecurityMsgCheck } from '@/api/system.js';
import { validateCheckResult } from '@/utils/index';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    card_json: '',
    cardInfoList: [], //所有卡片信息
    user: {
      phonenumber: '',
      avator: '',
      userName: '',
      rank_city: '',
      rank_country: '',
      rank_province: '',
      city: '',
      province: '',
    },
    rankInfo: '', //展示的排名信息
    //主持人卡片数据
    cardInfo: {
      type: 'hostCard', //类型，死数据
      phone: '',
      rank: '', // 不存在时，不展示用户的具体排名，改为展示金牌主持人
      introduce: '', //主持人简介，为空，则展示 '我是本场互动主持人，有需要联系我'
      switch: '0', // 主持人卡片开关，0为关闭，1为开启；
      yuehunSwitch: '0', // 约婚开关，0为关闭，1为开启；
    },
    isShowChangeIntroduce: false, // 是否展示修改简介的弹窗
    newIntroduce: '', //  修改后的个人简介
    isShowChangePhone: false, // 是否展示修改手机号的弹窗
    newPhone: '', // 修改后的手机号
    isShowChangeTextColor: false,
    colorOptions: [
      { name: '白色', value: '#FFFFFF' },
      { name: '黑色', value: '#000000' },
      { name: '深灰色', value: '#333333' },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getUserInfo();
    // 初始化七牛
    initQiniu();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 判断是否需要更新卡片数据
    const isNeedUpdate = wx.getStorageSync('updateHostCard');
    if (isNeedUpdate) {
      console.log('更新');
      // 获取更新后的卡片数据
      const newCardList = getStorageItem('cardInfoList');
      const copyCardList = JSON.parse(newCardList);
      // 更新所有卡片数据
      this.setData({
        cardInfoList: copyCardList,
      });
      console.log('新的所有卡片数据', newCardList);
      // 获取对应卡片数据
      const newCard = copyCardList.find((item) => {
        if (item.type === 'hostCard') {
          return true;
        }
        return false;
      });
      // 更新卡片数据
      this.setData({
        cardInfo: newCard,
      });
      console.log('更新后的卡片数据', newCard);
      // 更新排名
      this.rankHandler();
      // 移除缓存标识
      wx.removeStorageSync('updateHostCard');
    }
  },
  //获取用户信息
  async getUserInfo() {
    const { data: userInfo } = await getUserProfileInfo();
    const { phonenumber, card_json, rank_city, rank_country, rank_province, province, city } = userInfo;
    const userName = getStorageItem('user_name');
    const avator = getStorageItem('headerImgPath');
    // 保存用户信息
    this.setData({
      'user.avator': avator,
      'user.userName': userName,
      'user.phonenumber': phonenumber,
      'user.rank_city': rank_city,
      'user.rank_country': rank_country,
      'user.rank_province': rank_province,
      'user.province': province,
      'user.city': city,
    });
    // 缓存中设置排名数据
    setStorageItem('rank_city', rank_city);
    setStorageItem('rank_province', rank_province);
    setStorageItem('rank_country', rank_country);
    // 判断card_json没传的情况
    if (!card_json) {
      this.setData({
        'cardInfo.rank': '',
        'cardInfo.introduce': '我是本场互动主持人，有需要联系我',
        'cardInfo.switch': '0',
        'cardInfo.type': 'hostCard',
        'cardInfo.phone': '',
        'cardInfo.yuehunSwitch': '0',
      });
    } else {
      // 保存card_json
      this.setData({
        card_json: card_json,
      });
      // 1.将card_json字段数据转化为object类型
      const target = JSON.parse(card_json);
      if (target) {
        this.setData({
          cardInfoList: [...target],
        });
      } else {
        this.setData({
          cardInfoList: [],
        });
      }
      // 2.查找type为'hostCard'类型的卡片信息的索引
      const targetIndex = target.findIndex((item) => {
        if (item.type === 'hostCard') {
          return true;
        }
        return false;
      });
      let cardInfo = null;
      if (target && 0 <= targetIndex && targetIndex < target.length) {
        cardInfo = {
          ...target[targetIndex],
        };
      }
      // 如果有对应卡片信息
      if (cardInfo) {
        this.setData({
          'cardInfo.type': cardInfo.type,
          'cardInfo.introduce': cardInfo.introduce || '我是本场互动主持人，有需要联系我',
          'cardInfo.switch': cardInfo.switch || '0',
          'cardInfo.rank': cardInfo.rank || '',
          'cardInfo.phone': cardInfo.phone || '',
          'cardInfo.yuehunSwitch': cardInfo.yuehunSwitch || '0',
          'cardInfo.cardBg': cardInfo.cardBg || 'https://ustatic.hudongmiao.com/joymewContact/hostCardBg.png',
          'cardInfo.textColor': cardInfo.textColor || '#FFFFFF'
        });
      } else {
        // 没有则使用默认值
        this.setData({
          'cardInfo.type': 'hostCard',
          'cardInfo.introduce': '我是本场互动主持人，有需要联系我',
          'cardInfo.switch': '0',
          'cardInfo.rank': '',
          'cardInfo.phone': '',
          'cardInfo.cardBg': 'https://ustatic.hudongmiao.com/joymewContact/hostCardBg.png',
          'cardInfo.textColor': '#FFFFFF'
        });
      }
    }
    // 处理最终所有卡片数组信息
    this.updateTargetHandler();
    // 获取排名信息
    this.rankHandler();
  },
  // 处理排名的展示
  rankHandler() {
    if (String(this.data.cardInfo.rank) === 'city') {
      this.setData({
        rankInfo: '本市排名：' + this.data.user.rank_city,
      });
    } else if (String(this.data.cardInfo.rank) === 'country') {
      this.setData({
        rankInfo: '全国排名：' + this.data.user.rank_country,
      });
    } else if (String(this.data.cardInfo.rank) === 'province') {
      this.setData({
        rankInfo: '本省排名：' + this.data.user.rank_province,
      });
    } else {
      this.setData({
        rankInfo: '金牌主持人',
      });
    }
    console.log('rankInfo', this.data.rankInfo, this.data.cardInfo.rank);
  },
  // 处理目标结果的更新
  updateTargetHandler() {
    // 1.查找主持人卡片的索引
    let targetIndex = this.data.cardInfoList.findIndex((item) => {
      if (item.type === 'hostCard') {
        return true;
      }
      return false;
    });
    // 判断是否有该卡片的数据
    if (targetIndex >= 0) {
      // 修改当前索引的卡片数据
      this.setData({
        ['cardInfoList[' + targetIndex + ']']: this.data.cardInfo,
      });
    } else {
      // 如果没有该卡片信息，则新增
      this.data.cardInfoList.push(this.data.cardInfo);
    }
    // 更新缓存数据
    setStorageItem('cardInfoList', JSON.stringify(this.data.cardInfoList));
  },
  // 关闭卡片
  async changeSwitch(e) {
    let target = e.detail.value;
    if (target) {
      this.setData({
        'cardInfo.switch': '1',
      });
    } else {
      this.setData({
        'cardInfo.switch': '0',
      });
    }
    // 调用修改操作
    const res = await this.updateCardHandler();
    if (String(res) === 'success') {
      wx.showToast({
        icon: 'none',
        title: '操作成功',
      });
      return;
    }
  },
  //跳转至排名展示设置页
  turnToRank() {
    wx.navigateTo({
      url: '/pages/home/getPerson/myCard/myRank/myRank?' + 'rank=' + this.data.cardInfo.rank,
    });
  },
  // 打开修改简介弹窗
  showChangeIntroduce() {
    this.setData({
      isShowChangeIntroduce: true,
      newIntroduce: '',
    });
  },
  // 关闭弹窗
  closeDialog() {
    this.setData({
      isShowChangeIntroduce: false,
      newIntroduce: '',
      isShowChangePhone: false,
      newPhone: '',
      isShowChangeTextColor: false,
    });
  },
  // 修改简介
  async changeIntroduce() {
    // 判断新的个人简介长度是否为0, 如果是则使用默认
    if (this.data.newIntroduce.length === 0) {
      this.setData({
        'cardInfo.introduce': '我是本场互动主持人，有需要联系我',
      });
    } else {
      this.setData({
        'cardInfo.introduce': this.data.newIntroduce,
      });
    }
    try {
      const checkRes = await reqSecurityMsgCheck(this.data.newIntroduce);
      if (!validateCheckResult(checkRes.data.data?.msg_sec_check)) {
        throw new Error('内容非法');
      }
      // 调用修改接口
      const res = await this.updateCardHandler();
      if (String(res) === 'success') {
        this.closeDialog();
        wx.showToast({
          title: '修改成功',
          icon: 'none',
        });
      } else {
        wx.showToast({
          icon: 'none',
          title: '修改失败，请稍后重试',
        });
      }
    } catch (err) {
      console.log(err);
      wx.showToast({
        title: '内容非法!',
        icon: 'error',
      });
    }
  },
  // 打开修改手机号弹窗
  showChangePhone() {
    this.setData({
      isShowChangePhone: true,
      newPhone: '',
    });
  },
  // 修改手机号
  async changePhone() {
    // 判断新的手机号格式是否11位, 如果是则使用默认
    if (this.data.newPhone.length !== 11) {
      this.setData({
        'cardInfo.phone': this.data.user.phonenumber,
      });
    } else {
      this.setData({
        'cardInfo.phone': this.data.newPhone,
      });
    }
    // 调用修改接口
    const res = await this.updateCardHandler();
    if (String(res) === 'success') {
      this.closeDialog();
      wx.showToast({
        title: '修改成功',
        icon: 'none',
      });
    } else {
      wx.showToast({
        icon: 'none',
        title: '修改失败，请稍后重试',
      });
    }
  },
  // 更新卡片操作
  async updateCardHandler() {
    let target = '';
    // 更新所有卡片数据
    this.updateTargetHandler();
    // 转化为JSON
    target = JSON.stringify(this.data.cardInfoList);

    if (!target) {
      target = JSON.stringify([]);
    }
    const { data: res } = await updateCardInfo(target);
    return res;
  },
  // 跳转至添加二维码页面
  turnToAddQRCode() {
    wx.navigateTo({
      url: '/pages/home/getPerson/addQRCode/addQRCode',
    });
  },
  // 修改所属地区
  async changeArea(e) {
    const values = e.detail.value;
    const province = values[0];
    const city = values[1];
    // 调用修改接口
    await this.modifyUserInfo({
      province: province,
      city: city,
    });
    // 更新地区需要更新排名，
    this.getUserInfo();
  },
  // 修改用户信息
  async modifyUserInfo(paramObj) {
    const { data: res } = await modifyUserInfo(paramObj);
    console.log('修改结果', res);
  },
  // 修改卡片背景
  changeCardBg(e) {
    const reqUpdate = async () => {
      // 调用修改接口
      const res = await this.updateCardHandler();
      if (String(res) === 'success') {
        this.closeDialog();
        wx.showToast({
          title: '修改成功',
          icon: 'none',
        });
        // 背景不存在的情况下需要返回以遮掩无背景的丑陋
        if (!this.data.cardInfo.cardBg) {
          wx.navigateBack();
        }
      } else {
        wx.showToast({
          icon: 'none',
          title: '修改失败，请稍后重试',
        });
      }
    };
    wx.showActionSheet({
      itemList: ['从相册中选择'],
      success: (res) => {
        console.log(res);
        const { tapIndex } = res;
        //相册
        if (Number(tapIndex) === 0) {
          wx.chooseMedia({
            mediaType: ['image'],
            sourceType: ['album'],
            sizeType: ['compressed'],
            count: 1,
            success: async (res) => {
              const url = res.tempFiles[0].tempFilePath;
              // 将头像上传至七牛云
              const uploadRes = await uploadFile([url]);
              const targetUrl = uploadRes[0].imageURL;
              console.log('上传后的地址', targetUrl);
              this.setData({
                'cardInfo.cardBg': targetUrl,
              });
              reqUpdate();
            },
          });
        }
      },
      fail: (err) => {
        console.log(err);
        this.setData({
          'cardInfo.cardBg': '',
        });
        reqUpdate();
      },
    });
  },
  // 打开修改文字颜色弹窗
  showChangeTextColor() {
    this.setData({
      'isShowChangeTextColor': true,
    });
  },
  // 选择文字颜色
  async selectTextColor(e) {
    const selectedColor = e.currentTarget.dataset.color;
    this.setData({
      'cardInfo.textColor': selectedColor
    })
    // 调用修改接口
    const res = await this.updateCardHandler();
    if (String(res) === 'success') {
      this.closeDialog()
      wx.showToast({
        title: '修改成功',
        icon: 'none'
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '修改失败，请稍后重试',
      })
    }
  },
  // 恢复默认文字颜色
  async resetTextColor() {
    this.setData({
      'cardInfo.textColor': '' // 默认颜色
    })
    // 调用修改接口
    const res = await this.updateCardHandler();
    if (String(res) === 'success') {
      this.closeDialog()
      wx.showToast({
        title: '已恢复默认',
        icon: 'none'
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '操作失败，请稍后重试',
      })
    }
  },
  
});
